<template>
    <div class="contactBox">
        <div class="title">
            CONTACT
        </div>
        <div class="email">
            <img src="../../assets/image/email-max.png" alt="">
            <div class="introduce">
                客服邮箱
            </div>
            <div class="info">{{ email }}</div>
        </div>
    </div>
    <form>
        <input required type="text" v-model="formData.name" placeholder="姓名：">
        <input required type="email" v-model="formData.customerEmail" placeholder="邮箱：">
        <textarea v-model="formData.message" placeholder="留言："></textarea>
        <button @click="saveMessage">发送</button>
    </form>
</template>

<script setup lang="ts">
import { getEmailBoxAPI, saveMessageAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

// 获取邮箱

const email = ref('')

const getEmail = async () => {
    const res = await getEmailBoxAPI()

    if (res.data.code === 200) {
        email.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getEmail()
})

// 保存联系方式

const formData = ref({
    name: '',
    customerEmail: '',
    message: ''
})

const saveMessage = async () => {
    const res = await saveMessageAPI(formData.value.name, formData.value.customerEmail, formData.value.message)

    if (res.data.code === 200) {
        ElMessage.success('留言成功')

        formData.value = {
            name: '',
            customerEmail: '',
            message: ''
        }
    }
    else {
        ElMessage.error(res.data.msg)
    }
}


</script>

<style lang="scss" scoped>
.contactBox {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
        margin-top: 210px;
        display: flex;
        justify-content: center;
        color: black;
        font-size: 70px;
    }

    .email {
        width: 100%;
        max-width: 1300px;
        background-color: #f5f5f5;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        box-sizing: border-box;
        // margin-left: 20px;
        margin-right: 20px;
        margin-top: 50px;
        line-height: 30px;

        img {
            margin-bottom: 10px;
        }

        .introduce {
            font-size: 14px;
            color: #666666;
            margin-top: 10px;
        }

        .info {
            font-size: 20px;
            color: black
        }
    }
}

form {
    display: flex;
    flex-direction: column;
    width: 400px;
    margin: 45px auto 0;

    margin-bottom: 70px;


    input {
        width: 100%;
        border: 0;
        height: 36px;
        line-height: 36px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 0 10px;
        margin-bottom: 10px;
        background-color: #f3f3f3;

        &:focus {
            border: 0;
            outline: 0;
        }
    }

    textarea {
        width: 100%;
        border: 0;
        height: 120px;
        line-height: 1.6em;
        resize: none;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #f3f3f3;

        &:focus {
            border: 0;
            outline: 0;
        }
    }

    button {
        transition: all .4s;
        opacity: .75;
        width: 100%;
        border: 0;
        background-color: #e52a2a;
        border-radius: 10px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #fff;
        font-size: 16px;
        cursor: pointer;
    }

}
</style>